<!--  -->
<template>
    <div id="container"></div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'

const state = reactive<any>({
    map: null
})

const initMap = () => {


    state.map = new (window as any).BMapGL.Map("container");          // 创建地图实例 
    const point = new (window as any).BMapGL.Point(116.404, 39.915);  // 创建点坐标 
    state.map.centerAndZoom(point, 11);

        //添加信息窗口
        var opts = {
        width: 250,     // 信息窗口宽度
        height: 100,    // 信息窗口高度
        title: "Hello"  // 信息窗口标题
    }
   

    //添加点
    var markerPoint = new (window as any).BMapGL.Point(116.295058, 40.154693);
    var marker = new (window as any).BMapGL.Marker(markerPoint);        // 创建标注   

    marker.on('click',(e:any)=>{
        console.log(e.target.latLng);

        console.log(state.map.getCenter());
        
        let infoWindow = new (window as any).BMapGL.InfoWindow("Worldaaa", opts);  // 创建信息窗口对象
      state.map.openInfoWindow(infoWindow, e.target.latLng);
        
    })
    state.map.addOverlay(marker);                     // 将标注添加到地图中

    


}
onMounted(() => {

    initMap();


})
</script>
<style>
#container {
    width: 100%;
    height: 100vh;

}
</style>